<template>
  <el-card shadow="never" class="box-card">
    <template #header>
      <div class="card-header">
        <span>我的收藏</span>
      </div>
    </template>
    <div id="cardbox">
      <MyCard class="BlogCard" v-if="!articleList"></MyCard>
      <MyCard class="BlogCard"
        v-else
        v-for="article in articleList"
        :key="article"
        :article="article"
      ></MyCard>
      <el-pagination
        :currentPage="page.currentPage"
        :page-size="page.pageSize"
        layout="prev, pager, next"
        :total="page.pageSize * page.pageNum"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script>
import api from '../../api/data.js'
import MyCard from '@/components/MyCard'
import { ElMessage } from 'element-plus'
export default {
  name: 'MyFav',
  components: {
    MyCard
  },
  data () {
    return {
      articleList: null,
      page: {
        currentPage: 1,
        pageSize: 5,
        pageNum: 1,
      }
  }},
  methods: {
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.pageChange()
      // console.log(`current page: ${val}`)
    },
    pageChange () {
      api.getAllCollections({
        token: this.$store.state.token,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          this.articleList = res.data.articleList
          this.page.currentPage = res.data.currentPage
          this.page.pageSize = res.data.pageSize
          this.page.pageNum = res.data.pageNum
          // console.log(this.articleList)
        } else {
          ElMessage.error(res.message)
        }
      })
    },
  },
  mounted () {
    this.pageChange()
  }
}
</script>

<style scoped>
/* .box-card {
  height: 70vh;
} */
.el-pagination {
  margin-top: 1vh;
  margin-left: 24vw;
}
.BlogCard {
  margin-top: 2vh;
}
</style>
